import Vue from 'vue'
import Vuex from 'vuex'
import userModule from './module/user'
Vue.use(Vuex)

// vuex 插件：用于保存购物车中选购的商品数据保存到本地存储中（数据持久化）

const savePlugin = (store) => {
  store.subscribe((mutation, state) => {
    // console.log('执行mutation ', mutation.type)
    // 将购物车商品保存到localstorage
    localStorage.setItem('cart', JSON.stringify(state.cart))
  })
}

const store = new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  plugins: [savePlugin],
  state: {
    // 存储应用中组件需要共享的数据
    cart: JSON.parse(localStorage.getItem('cart')) || []
  },
  getters: {
    isAllChecked (state) {
      return state.cart.every(prod => prod.isChecked)
    },
    totalMoney (state) {
      return Math.floor(state.cart.reduce((sum, prod) => {
        if (prod.isChecked) {
          sum += prod.price * prod.num
        }
        return sum
      }, 0) * 100)
    }
  }, // 类似于 computed
  mutations: { // 函数结构，用于同步更新

    /**
     * 添加购物车商品
     * @param state store 中 state 的引用
     * @param payload 有效载荷，payload 中保存添加到购物车中的商品对象
     */
    addTocart (state, payload) {
      const has = state.cart.some(prod => prod.id === payload.id)
      if (has) { // 存在 ， 叠加数量
        state.cart = state.cart.map(prod => {
          const copy = { ...prod }
          if (copy.id === payload.id) {
            copy.num += payload.num
          }
          return copy
        })
      } else { // 不存在 添加
        state.cart.push({
          ...payload,
          isChecked: true
        }) // 将对象解构，并添加一个选中的属性
      }
    },
    /**
     * 删除购物车中商品
     * @param id 待删除商品的 id
     */
    removeFromCart (state, id) {
      state.cart = state.cart.filter(prod => prod.id !== id)
    },
    /**
       * 修改数量
       * @param payload 对象 {id, amount}
       */
    changeAmount (state, { id, num }) {
      state.cart = state.cart.map(prod => {
        const copy = { ...prod }
        if (copy.id === id) {
          copy.num = num
        }
        return copy
      })
    },
    toggleCheck (state, id) {
      state.cart = state.cart.map(prod => {
        const copy = { ...prod }
        if (copy.id === id) {
          copy.isChecked = !copy.isChecked
        }
        return copy
      })
    }, // isAllChecked  全选复选框 点击之前的状态
    toggleAllCheck (state, preCheck) {
      state.cart = state.cart.map(prod => {
        const copy = { ...prod }
        copy.isChecked = !preCheck
        return copy
      })
    }
  },
  actions: {},
  modules: {
    user: userModule // user 相当于 键名
  }
})

export default store
